let apply = document.querySelectorAll(".apply-data");
// console.log(apply);
let mask = document.querySelector(".mask");
// console.log(mask);

let nouse = document.querySelector("#nouse");

let user = document.querySelector("#user");
let pwd = document.querySelector("#pwd");
// console.log(user,pwd);

let inputIcon = document.querySelector("#input-icon");
// console.log(inputIcon);

let inputIcons = document.querySelector("#input-icons");
// console.log(inputIcons);

let modelBtn = document.querySelector("#model-btn");

/* 1.点击申请数据，显示模态框 */
apply.forEach(function (v) {
  v.addEventListener("click", function () {
    //   console.log(1);
    mask.style.display = "block"; //以块元素显示
  });
});

/* 2.点击nouse时，隐藏模态框 */
nouse.addEventListener("click", function () {
  mask.style.display = "none";
});

/* 3.判断 如果输入用户名长度大于0，则显示叉叉图标 否则隐藏 */
user.addEventListener("input", function () {
  if (user.value.length > 0) {
    inputIcon.style.display = "block";
  } else {
    inputIcon.style.display = "none";
  }
});

/*4. 点击叉叉图标，清空内容并隐藏 自己 */
inputIcon.addEventListener("click", function () {
  user.value = "";
  inputIcon.style.display = "none";
});

/* 5.判断 如果输入用户名长度大于0，则显示叉叉图标 否则隐藏 */
pwd.addEventListener("input", function () {
  if (pwd.value.length > 0) {
    inputIcons.style.display = "block";
  } else {
    inputIcons.style.display = "none";
  }
});

/*6. 点击叉叉图标，清空内容并隐藏 自己 */
inputIcons.addEventListener("click", function () {
  pwd.value = "";
  inputIcons.style.display = "none";
});

//创建账号验证规则--正则表达式
let reg =
  /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/;
//创建密码验证规则--正则表达式
let regs = /^\d{6}$/;

/* 7.判断账号是否有值-- 账号失去焦点时，验证是否合法 (用正则表达式)
    如果为真，账号验证就为空，如果为假，就输出账号错误
    账号验证userMsg(是在input框下面的文字)
*/
user.addEventListener("blur", function () {
  // console.log(user);

  //使用reg验证输入信息是否正确=布尔值
  let bool = reg.test(user.value);

  if (bool) {
    //bool为真
    userMsg.textContent = "";
  } else {
    userMsg.textContent = "账号错误";
  }
});

/* 8.判断密码pwd是否为六位数字---密码失去焦点时，验证是否合法
    如果为真，密码验证pwdMsg就为空，如果为假，就输出密码必须为六位数字

*/
pwd.addEventListener("blur", function () {
  //用rges验证输入信息是否正确
  let bool = regs.test(pwd.value);
  if (bool) {
    pwdMsg.textContent = "";
  } else {
    pwdMsg.textContent = "密码必须为六位数字";
  }
});

/* 9.点击登录按钮，验证账号reg.test(user.value)和密码regs.test(pwd.value)是否正确
如果账号为假，则输出userMsg.textContent='账号错误'，密码为假，输出pwdMsg.textContent='密码必须为六位数字'
都不是就跳转页面
*/

modelBtn.addEventListener("click", function () {
  if (!reg.test(user.value)) {
    //只判断失败的情况
    userMsg.textContent = "账号错误";
  } else if (!regs.test(pwd.value)) {
    pwdMsg.textContent = "密码必须为六位数字";
  } else {
    //跳转页面/*  */
    location.href = "../page/API.html";
  }
});

/*  鼠标点击菜单(toggle-login a)
 *         为当前菜单添加激活样式
 *         显示当前菜单对应的内容(tabContent)
 */


tabCard('.toggle-login a','.tabContent')













